<template>
    <view class="warningdetails" style="height: 100%;
	display: flex;
	flex-direction: column;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
        <view class="title">
            <text>预警详情</text>
        </view>
        <view class="main">
            <view class="warningregion">
                <text style="color:#fff">监测区域</text>
                <text>{{ warninginfo.stationName }}</text>
            </view>
            <view class="warninglevel">
                <text style="color:#fff">预警级别</text>
                <text>{{ warninginfo.prewarningLevelName }}</text>
            </view>
            <view class="warningsource">
                <text style="color:#fff">预警来源</text>
                <text>{{ warninginfo.departmentName }}</text>
            </view>
            <view class="warningtime">
                <text style="color:#fff">预警时间</text>
                <text>{{ warninginfo.earlyWarnDate }}</text>
            </view>
            <view class="warningtext">
                <text style="color: #fff;">预警原因</text>
                <text style="color:#ccc">{{ warninginfo.reason }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                warninginfo:{ }
            }
        },
        methods:{
            onLoad:function(option){
				console.log(option)
				const item = JSON.parse(decodeURIComponent(option.item));
				console.log(item)
				this.warninginfo=item
            }
        },
        mounted(){
            
        }
    }
</script>

<style scoped>
uni-page-body{
    height: 100%;
}
.warningdetails{
    height: 100%;
    /* background-color: #f9f9f9; */
}
.main{
	background: none;
	
}
.title{
    font-size: 16px;
    padding: 15px;
    color: #fff;
    text-align: center;
    background: url('../../../static/image/navbg.png') no-repeat center;
}
.warningregion,.warninglevel,.warningsource,.warningtime{
    display: flex;
    justify-content: space-between;
    align-items: center;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
    /* background-color: #fff; */
    margin-bottom: 5px;
    padding: 15px 30px;
    font-size: 12px;
    color: #eee;
    text-align: right;
}
.warningtext{
    display: flex;
    flex-direction: column;
	border-bottom: 1px solid #ccc;
    /* background-color: #fff; */
    padding: 15px 30px;
    font-size: 12px;
    line-height: 24px;
}
</style>